<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell 
      title="昵称" 
      :value="user.name"
      @click="isEditNameShow=true"
     
      is-link
    />
    <van-cell title="性别" 
    :value="user.gender===1?'女':'男'" is-link 
     @click="isEditGenderShow=true"
    />
    <van-cell title="生日" 
    :value="user.birthday"  is-link 
    @click="isEditBirthday=true"
    />
    <!-- /个人信息 -->

    <!-- 编辑昵称弹框-->
    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      style="height:100%"
    >
<!-- 
    :nickname="user.name"
    @update-name="user.name=$event" -->
 <!-- v-model="user.username" 
        :value="user.username" 默认名value
      @input="user.username" 默认监听input事件     
    -->
    <!-- v-model只能使用一次，如果多个数据需要保持同步使用.sync -->
    <update-name
      v-model="user.name"
      @close="isEditNameShow=false"
       
    /> 
  </van-popup>
<!-- 编辑昵称弹框结束-->

<!-- 编辑性别-->
     <van-popup
      v-model="isEditGenderShow"
      position="bottom"
      
    >
    <update-gender
      v-model="user.gender"
      @close="isEditGenderShow=false"
       
    /> 
  </van-popup>


  <!-- 编辑生日-->
     <van-popup
      v-model="isEditBirthday"
      position="bottom"
      
    >
    <update-birthday
      v-if="isEditBirthday"
      v-model="user.birthday"
      @close="isEditBirthday=false"
       
    /> 
  </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
export default {
  name: 'UserProfile',
  components: {UpdateName,UpdateGender,UpdateBirthday},
  props: {},
 
     data () {
    return {
      user:{},
      isEditNameShow:false,//编辑昵称显示状态
      isEditGenderShow:false, //编辑性别显示状态
      isEditBirthday:false//编辑生日
    }
  },
  computed: {},
  watch: {},
  created () {
   this.loadUserProfile()
  },
  mounted () {},
  methods: {
   async loadUserProfile () {
       const {data}=await getUserProfile()
      this.user=data.data
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
.van-popup{
  background-color: #f5f7f9;
}
</style>